<template>
<!--    我的积分页面-->
    <div class="points">
        <Top><p>我的积分</p></Top>
        <!--------------------------------------------------------->
        <div class="content">
            <div class="white">
                <div class="header">
                    <span>当前积分</span>
                    <i class="layui-icon layui-icon-help"></i>
                    <span @click="$router.push('/jifen/hong')">积分说明</span>
                </div>
                <div class="count">
                    <p style="display: inline-block">0</p>
                    <span>分</span>
                </div>
                <div class="promit" @click="$store.state.tan=true">积分兑换商品</div>
            </div>
        </div>
        <div class="detail">
            <p>最近30天积分记录</p>
        </div>
<Tan><p>去下单赚取大量积分吧</p></Tan>
      <router-view></router-view>
    </div>
</template>

<script>
    import Top from "@/components/Top";
    import Tan from "@/components/Tan";
    export default {
        name: "Points",
      components: {Tan, Top},
      methods:{
            toprofile(){
                this.$router.push("/profile")
            }
        }
    }
</script>

<style scoped>
    .blue{
        text-align: center;
        width:23.4rem;
        height:3rem;
        background-color: #3190e8;
        position: relative;
        /*overflow: hidden;*/
    }

    .blue span{
        font-size:1.3rem;
        line-height: 2.95rem;
        color: white;
        font-weight: bold;
    }
    .layui-icon-left{
        font-size: 1.5rem;
        color: white;
        position: absolute;
        top:0.6rem;
        left:1rem;
    }
    .content{
        height:11rem;
        width: 23.4rem;
        background-color: #3190e8;
        padding-top: 1rem;
    }
    .white{
        width: 94%;
        height:10rem;
        background-color: white;
        border-radius: 2px;
        margin-left:3%;
    }
    .header{
        padding-top:0.5rem;
        margin-left: 1rem;
    }
    .header span:nth-of-type(1){
        color: #666666;
    }
    .header i{
        margin-left:12rem;
        color:#3190e8;
    }
    .header span:nth-of-type(2){
        color: #3190e8;
        margin-left:0rem;
    }
    .count p{
        margin-top: 0.2rem;
        margin-left: 1rem;
        font-size: 3rem;
    }
    .count span{
        margin-left: 0.51rem;
        font-size: 1.2rem;
    }
    .promit{
        margin-left: 5%;
        width: 90%;
        height: 3rem;
        font-size: 1.2rem;
        color: #fff;
        border-radius: .15rem;
        line-height: 3rem;
        margin-top: 1rem;
        text-align: center;
        background-color: #fe6d47;
    }
    .detail p{
        font-size: 1rem;
        color: #999;
        line-height: 2rem;
        padding-left: 1rem;
    }
</style>